Skip to content

Experiment: Connect block attributes with custom fields via UI #176

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 21 commits into
base: trunk
Choose a base branch
from

Conversation

cbravobernal
Copy link
Contributor

@cbravobernal cbravobernal commented Jun 12, 2025

What

⚠️ It needs to be loaded as a beta feature in their respective admin panel.
⚠️ Pattern overrides cannot be set up connected to fields. They are still not compatible on Core.
⚠️ There is some duplication both in code and UI with Core.

The PR allows to connect block attributes with custom fields via UI. Is still experimental, as I have not yet tested with any field type that can be created. In a future PR we can add an advanced view, using DataViews.

The image block will only search for image type fields, and all their attributes can be bound at once, just selecting the image field.

The paragraph, heading, and button blocks will only work with an initial set of items set in this variable:

const BLOCK_BINDINGS_RELATED_FIELD_TYPES = {
	'core/paragraph': {
		content: [ 'text', 'textarea', 'date_picker', 'number' ],
	},
	'core/heading': {
		content: [ 'text', 'textarea', 'date_picker', 'number' ],
	},
	'core/image': {
		id: [ 'image' ],
		url: [ 'image' ],
		title: [ 'image' ],
		alt: [ 'image' ],
	},
	'core/button': {
		url: [ 'url' ],
		text: [ 'text', 'checkbox', 'select', 'date_picker' ],
		linkTarget: [ 'text', 'checkbox', 'select' ],
		rel: [ 'text', 'checkbox', 'select' ],
	},
};

Screenshare

Screen.Recording.2025-07-08.at.18.04.35.mov

@cbravobernal cbravobernal self-assigned this Jun 12, 2025
@cbravobernal cbravobernal added the [Type] Enhancement New feature or request label Jun 12, 2025
@cbravobernal cbravobernal requested a review from ockham June 24, 2025 09:56
@cbravobernal cbravobernal force-pushed the update/connect-bindings-with-ui branch from 917b150 to 8d471bc Compare June 24, 2025 13:03
@cbravobernal cbravobernal added this to the 6.6.0 milestone Jun 27, 2025
@cbravobernal cbravobernal requested a review from priethor June 27, 2025 11:31
@cbravobernal cbravobernal marked this pull request as ready for review June 27, 2025 11:31
@cbravobernal cbravobernal requested a review from gziolo June 27, 2025 14:32
@ockham
Copy link
Contributor

ockham commented Jul 4, 2025

I think there's a minor UX glitch with regard to the tools panel and link/unlink button:

connect-fields

AFAIU, we should change two things here:

  • The panel's heading shouldn't change based on the link/unlink button; it shouldn't describe the link/unlink option, but the nature of the panel's controls (so probably "Attributes").
  • The panel's "vertical three dots" menu shouldn't change contextually; it should only apply to the whole Attributes panel, not its individual rows.

(This is based on how I observed the UX pattern to work e.g. for the existing margin panel in the style tab of the block inspector.)

@cbravobernal
Copy link
Contributor Author

  • The panel's "vertical three dots" menu shouldn't change contextually; it should only apply to the whole Attributes panel, not its individual rows.

But, in that case, if you have the four of them unlinked, and want to reset only the image title or alt, you will need to reset every of them at once and set one by one again, right?

It's better to keep consistency, but as we change the number of toolsitem, that is the default behaviour. I'll take a look at how is implemented for margin and styles.

Thanks @ockham!

@cbravobernal cbravobernal force-pushed the update/connect-bindings-with-ui branch from 63e9e91 to 7fa68ab Compare July 7, 2025 15:09
@@ -59,7 +69,7 @@ registerBlockBindingsSource( {
}

result[ attribute ] = value;
} else if ( typeof fieldValue === 'number' ) {
} else if ( 'number' === typeof fieldValue ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it make sense to replace this with

Suggested change
} else if ( 'number' === typeof fieldValue ) {
} else if ( 'number' === fieldType ) {

now that we have fieldType available?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I refactored the entire part 😅

@cbravobernal cbravobernal requested a review from Copilot July 8, 2025 16:10
@cbravobernal
Copy link
Contributor Author

Let's see copilot reviewing copilot code generated.

Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR introduces an experimental beta feature (connect_fields) that lets users bind block attributes to custom fields via the editor UI.

  • Adds a new connect_fields beta feature and hooks to enable it in admin.
  • Extends the REST API to include scf_field_groups and enriches field metadata.
  • Implements UI controls in the block editor to select and bind fields to block attributes.

Reviewed Changes

Copilot reviewed 10 out of 11 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
secure-custom-fields.php Register new connect_fields feature for uninstall
package.json Add @wordpress/icons dependency for UI icons
includes/rest-api/class-acf-rest-types-endpoint.php Expose scf_field_groups on REST endpoints and extend field data
includes/admin/beta-features/class-scf-beta-feature-connect-fields.php Define metadata for the new connect_fields beta feature
includes/admin/beta-features.php Enable, register, and enqueue scripts for connect_fields feature
assets/src/sass/_forms.scss Remove trailing whitespace
assets/src/js/bindings/sources.js Add date_picker formatting and merge field lookups
assets/src/js/bindings/index.js Import block-editor bindings entry point
assets/src/js/bindings/components/block-attributes-control-linked-button.js New toggle button component for attribute linking
assets/src/js/bindings/block-editor.js Add InspectorControls to bind block attributes to fields
Comments suppressed due to low confidence (4)

includes/admin/beta-features/class-scf-beta-feature-connect-fields.php:5

  • The class docblock description still refers to moving elements to the editor sidebar; update it to accurately describe the connect_fields feature (binding block attributes to custom fields).
 * This beta feature allows moving field group elements to the editor sidebar.

secure-custom-fields.php:881

  • The uninstall hook now only lists connect_fields but removes the existing editor_sidebar feature. If you intend to preserve both beta features, include 'editor_sidebar' alongside 'connect_fields'.
		'connect_fields',

includes/admin/beta-features.php:249

  • This line is duplicated immediately above; you can remove the redundant window.scf = window.scf || {}; to streamline the inline script.
window.scf = window.scf || {};

assets/src/js/bindings/block-editor.js:15

  • HStack is imported but never used; remove this unused import to keep the code clean.
	__experimentalHStack as HStack,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants